<template>
  <div class="content">
  <div id="mycharts1" style="width: 700px; height: 500px;"></div>
  <div id="mycharts2" style="width: 700px; height: 500px;"></div>
  </div>
</template>

<script>
import httpApi from '@/http';
import * as echarts from 'echarts';
export default {
  data() {
    return {
      list: '',
    }
  },
  mounted:(

  () => {
    var myChart1 = echarts.init(document.getElementById('mycharts1'))
    var myChart2 = echarts.init(document.getElementById('mycharts2'))
    httpApi.userApi.listUser({page:1,pagesize:6}).then(res=>{
    console.log(res)
      let user = res.data.data
      console.log(user)
      myChart2.setOption({
  title: {
    text: '用户平均在线时长'
  },
  tooltip: {
    // 触发类型
    trigger:'axis', //item图形触发  axis坐标轴触发
    // 坐标轴指示器
    // 小驼峰命名法
    axisPointer:{
      type:'cross',//line 显示一个实线 shadow 阴影效果 cross十字准星
    },
    // showContent:false,
    // 悬浮层的样式
    backgroundColor:'yellow',
    borderColor:'red',
    // 提示信息
    formatter(params){
       for (let i = 0; i < params.length; i++) {       
         return '用户名:&nbsp;&nbsp;' + params[i].name +'<br>'+ '在线时长:&nbsp;&nbsp;' +params[i].data +'小时'
      }
    }
  },
  legend :{
    show:true,// 设置图例的开启或是关闭
    icon:'', // 设置图例的形状
    top:'10%',  // 设置图例所在的位置
    //图例的宽高
    itemWidth:50,
    itemheight:20,
    // 设置文字颜色
    textStyle:{
      color:'red',
      fontSize:30,
      backgroundColor:'pink'
    }
  },
  xAxis: {
    data: [user[0].user_name, user[1].user_name, user[2].user_name, user[3].user_name, user[4].user_name],
    // type:'category ' //类目轴
  },
  yAxis: {
    // type:'value'
  },
  series: [
    {
      name: '时长',
      type: 'bar',
      data: [5, 6, 4, 3, 4 , 8],
      barWidth:20,
      color:'red',
      itemStyle:{
        //单独轴的样式
        normal:{
          color:function(parmas){
            let colorList=[
              "red",
              "blue",
              "green",
              "pink",
              "black",
              "yellow",

            ]
            return colorList[parmas.dataIndex]
          }
        }
      },
      // 最大值和最小值的标记
      markPoint:{
        data:[
          {
            type:"max",
            name:'最大值'
          },
          {
            type:'min',
            name:"最小值"
          }
        ]
      },
      markLine:{
        data:[
          {
            type:'average',
            name:'平均值'
          }
        ]
      }
    }
  ]
});
  }),
    myChart1.setOption({

        title: {
            text: '功能数量',
            left: 'center'
        },
        // 图例
        legend:{
            show:true,
            // 位置
            left:'left',
            // 排列方式
            orient:'verical'
        },
        
        series: [
            {
                name: '实现统计',
                type: 'pie',
                // 设置饼图的半径 第一项是内半径 第二项是外半径
                radius:['40%','70%'],
                // 设置环形图的文本标签
                label:{
                    show:true,
                    position:"inside" //outside:外侧展示 inside 内侧展示 center 中心展示
                },
                // roseType:"area",// 是否设置南丁格尔图
                itemStyle:{
                    shadowBlur:200,
                    shadowColor:'rgba(0,0,0,.5)'
                },
                data:[
                { value: 98, name: '宠物店' },
                { value: 80, name: '新闻' },
                { value: 45, name: '科普' },
                { value: 85, name: '社区' },
            ],
            },
            

        ]
    })


})
}
</script>

<style>
  .content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .content div{
    margin-right: 24px;
    margin-top: 100px;
  }
</style>